<template>
  <div>
    <iframe :src="webmapUrl" frameborder="0" id="portalIframe"></iframe>
    <Tooltip content="制图成果" placement="left" id="drawResultsTooltip">
      <Button type="primary" @click="drawResultsBtnClick"
        ><Icon type="ios-apps-outline"
      /></Button>
    </Tooltip>
    <Modal
      :mask="false"
      :width="800"
      :footer-hide="true"
      :styles="modelStyleObj"
      v-model="modelShow"
      title="制图成果"
    >
      <Row :gutter="16">
        <Col span="8" v-for="(item, index) in portalContent" :key="index">
          <Card>
            <div class="imgContainer">
              <img :src="getImgSrc(item.id)" />
            </div>
            <span class="itemTitle">{{ item.title }}</span>
            <span class="itemType">{{ item.type }}</span>
            <Icon
              class="addItemBtn"
              type="ios-add-circle-outline"
              @click="addWebMap(item.id)"
            />
          </Card>
        </Col>
      </Row>
    </Modal>
    <Spin size="large" fix v-if="spinShow">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>Loading</div>
    </Spin>
  </div>
</template>
<style>
.ivu-col-span-8 {
  padding-bottom: 8px;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
<style scoped>
#portalIframe {
  width: 100%;
}
#drawResultsTooltip {
  position: absolute;
  top: 95px;
  right: 180px;
}
.imgContainer {
  text-align: center;
  border-bottom: 1px solid #e8eaec;
}
.itemTitle {
  display: block;
  font-weight: bolder;
  font-size: larger;
}
.itemType {
  display: block;
}
.addItemBtn {
  font-size: larger;
  position: absolute;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
}
.addItemBtn:hover {
  color: #2d8cf0;
}
</style>
<script>
import config from "../config";

export default {
  name: "OnlineDraw",
  data() {
    return {
      webmapUrl: config.portalConfig.webmapUrl,
      cssUrl: config.portalConfig.custumCss,
      modelShow: false,
      modelStyleObj: {
        position: "absolute",
        right: "150px",
        top: "128px",
      },
      portalToken: "",
      portalContent: [],
      config: config,
      spinShow: true,
    };
  },
  methods: {
    resize() {
      this.$("#portalIframe").height(window.innerHeight - 80);
    },
    changePortalStyle() {
      this.$(() => {
        this.$("iframe").on("load", () => {
          this.$("iframe")
            .contents()
            .find("head")
            .append(
              this.$(
                '<link rel="stylesheet" type="text/css" href=' +
                  this.cssUrl +
                  ">"
              )
            );
        });
      });
    },
    getPoratlContent() {
      const that = this;
      this.$.get(
        config.portalConfig.portalRestPreUrl +
          "content/users/" +
          sessionStorage.getItem("name"),
        {
          token: sessionStorage.getItem("portalToken"),
          f: "json",
        }
      ).done((res) => {
        console.log(res);
        that.portalContent = res.items.filter((item) => {
          return item.type === "Web Map";
        });

        // console.log(this.portalContent);
      });
    },
    getImgSrc(id) {
      return `${
        config.portalConfig.portalRestPreUrl
      }content/items/${id}/info/thumbnail/ago_downloaded.png?token=${sessionStorage.getItem(
        "portalToken"
      )}`;
    },
    drawResultsBtnClick() {
      this.getPoratlContent();
      this.modelShow = !this.modelShow;
    },
    addWebMap(id) {
      this.webmapUrl = config.portalConfig.webmapUrl + "?webmap=" + id;
    },
  },
  mounted() {
    this.resize();
    //this.changePortalStyle();
    let self = this;
    setTimeout(() => {
      self.spinShow = false;
    }, 1500);

    this.$(window).resize(() => {
      this.resize();
    });
  },
};
</script>
